import { fitChartSize } from '../utils/tools';
import { chinaGeoCoordMap } from './coorDataSimple';
import { emptyIcon } from './mapIcon';

export const chinaMapConfig = async (configData: any) => {
  const { chinaStationCount, online, offline, intl } = configData;
  const highlightChinaData = () => {
    return chinaStationCount
      .map((item: { name: string; value: number }) => {
        const geoCoord = chinaGeoCoordMap[item.name];
        if (geoCoord) {
          return {
            name: item.name,
            value: [...geoCoord, item.value],
            symbol: emptyIcon,
            symbolSize: [fitChartSize(42), fitChartSize(48)],
            symbolOffset: [0, -20],
            itemStyle: {
              normal: {
                color: '#3ebbff',
                shadowBlur: 0,
                shadowColor: 'rgba(0, 0, 0, 0)',
              },
              opacity: 1,
            },
            label: {
              normal: {
                show: true,
                formatter: `{b|${item.value}}`,
                position: 'inside',
                textStyle: {
                  color: '#fff',
                  fontSize: fitChartSize(14),
                  fontWeight: 'normal',
                  backgroundColor: 'transparent',
                },
                rich: {
                  b: {
                    fontSize: fitChartSize(14),
                    color: '#fff',
                    fontWeight: 'bold',
                  },
                },
              },
            },
          };
        } else {
          console.warn(`Geo coordinates not found for ${item.name}`);
          return null;
        }
      })
      .filter((item) => item !== null);
  };

  const convertData = (data: any[]) => {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const geoCoord = chinaGeoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].online ? 1 : 0), // 使用 1 表示在线，0 表示离线
          online: data[i].online,
        });
      }
    }
    return res;
  };

  return {
    backgroundColor: 'transparent',
    title: {
      show: false,
      text: '项目分布图',
      x: 'center',
      top: '10',
      textStyle: {
        color: '#fff',
        fontFamily: '等线',
        fontSize: 18,
      },
    },
    tooltip: {
      show: false,
    },
    visualMap: {
      show: true,
      type: 'piecewise',
      pieces: [
        {
          value: 1,
          label: `${intl.formatMessage({ id: 'bigdata.online' })} (${online})`,
          color: '#feb40e',
        },
        {
          value: 0,
          label: `${intl.formatMessage({ id: 'bigdata.offline' })} (${offline})`,
          color: '#3ebbff',
        },
      ],
      textStyle: {
        color: '#508FFF',
        fontSize: 12,
      },
      left: 0,
      bottom: 80,
      itemWidth: 20,
      itemHeight: 12,
    },
    geo: [
      {
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        show: true,
        map: 'china',
        roam: true,
        zoom: 1,
        aspectScale: 0.75,
        center: undefined,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: '#fff',
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: 'linear',
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(3,27,78,0.75)',
                },
                {
                  offset: 1,
                  color: 'rgba(58,149,253,0.75)',
                },
              ],
              global: true,
            },
            borderColor: 'rgba(192, 243, 251,0.5)',
            borderWidth: 1,
            shadowOffsetY: 15,
            shadowBlur: 12,
          },
          emphasis: {
            areaColor: {
              type: 'linear',
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(3,27,78,0.75)',
                },
                {
                  offset: 1,
                  color: 'rgba(58,149,253,0.75)',
                },
              ],
              global: true,
            },
          },
        },
      },
    ],
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 5,
        symbolSize: [fitChartSize(42), fitChartSize(48)],
        symbolOffset: [0, -20],
        data: highlightChinaData(),
      },
      {
        name: 'scatter',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(chinaStationCount),
        showEffectOn: 'render',
        rippleEffect: {
          scale: 3,
          brushType: 'stroke',
        },
        symbol: 'circle',
        symbolSize: [20, 10],
        itemStyle: {
          normal: {
            color: '#3ebbff',
            shadowBlur: 5,
            shadowColor: '#3ebbff',
          },
          opacity: 1,
        },
        zlevel: 4,
      },
    ],
  };
};
